import { useState } from "react";
import Middle from "./Middle";

import { MyContext } from "./pass";

function Top() {
  const [message, setMessage] = useState("Hello from Top");

  const handleClick = () => {
    setMessage("Top Message Changed");
  };

  return (
    <>
      <MyContext.Provider value={message}>
        This is Top component.
        <hr />
        <button onClick={() => handleClick()}>修改数据观察是否传递</button>
        <hr />
        <Middle />
      </MyContext.Provider>
    </>
  );
}

export default Top;
